<!--忘记密码确认密码-->
<template>
	<ul class="third_input">
		<li>
			<el-input class="telnum" type="text" :maxlength="11" v-model="inputaccount" placeholder="请输入手机号..."></el-input>
		</li>
		<li>
			<el-input class="password" type="text" v-model="telCode" placeholder="短信验证码..."></el-input>
			<el-button :disabled="isDisabled" class="getcode" v-text="btn_text" @click="getcode"></el-button>
		</li>
		<li>
			<el-button class="next" @click="next" @keydown.enter.tab.stop.self="next">下一步</el-button>
		</li>
	</ul>
</template>

<script>
	import {Code} from '../../until/getData';
	import Public from '../../until/public';
	export default {
		data() {
			return {
				isDisabled: false,
				btn_text: '获取验证码',
				time: 0,
				inputaccount:'',		// 手机号码
				telCode: ''				// 短信验证码
			}
		},
		methods: {
			next:function(){
				let data = {
					tel: this.inputaccount,
					verify: this.telCode 
				}
				Public.JS_Cookie('set', 'infoForget', data, 1);
				if (this.inputaccount.length == '11' && Public.isTel(this.inputaccount) && this.telCode != '') {
					this.$router.push({
						name: 'confirm'
					});
				} else {
					this.alert('信息不完整', 'warning');
				}
			},
			getcode(){
				if (this.inputaccount.length == '11' && Public.isTel(this.inputaccount)) {
					let data = {
						state: 2,
						tel: this.inputaccount
					}
					Code(data).then((res) => {
						if (res.code == '1') {
							this.time = 60;
							this.timer();
							this.alert('验证码已发送，请注意查收', 'success');
						}
					}).catch((err) => {
						console.log(err);
					})
				} else {
					this.alert('手机号码不能为空', 'warning');
				}
			},
			timer: function () {
				if (this.time > 0) {
					this.isDisabled = true;
					this.time--;
					setTimeout(this.timer, 1000);
					this.disabled = true;
					this.btn_text = this.text();
					if (this.time == 0) {
						this.time = 0;
						this.isDisabled = false;
						clearTimeout(this.timer);
					}
				}
			},
			text: function () {
				return this.time > 0 ? this.time + 's' : '重新获取';
			},
			alert(msg, alertType){
				this.$message({
					showClose: true,
					message: msg,
					type: alertType,
					center: true,
					duration: 2000
				});
			}
		}
	}
</script>

<style scoped>
	ul.third_input{
		width: 334px;
		padding-top: 24px;
		margin: 0 auto;
	}
	ul.third_input li{
		padding-top: 20px;
		list-style: none;
	}
	ul.third_input li .password{
		width: 185px;
	}
	ul.third_input li .getcode{
		width: 127px;
		height: 40px;
		background: linear-gradient(to right, #7557d1, #8b63e8);
		color: white;
		margin-left: 16px;
	}
	ul.third_input li .next{
		width: 334px;
		height: 42px;
		background: linear-gradient(to right, #7557d1, #8b63e8);
		color: white;
		font-size: 14px;
	}
</style>